<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>设备数据查看</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="../css/shebeishujuchakan.css">
    <script src="/src/static/jquery.js"></script>
    <script src="/src/static/echarts.js"></script>
</head>
<body>
<div>
    <div class="layui-container">

        <div class="layui-form-item">
            <label class="layui-form-label">年月：</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input ny" id="test1" placeholder="选择年月">
            </div>
        </div>


        <!--<input type="text" class="layui-input ny" id="test2" placeholder="请输入机器号" value="">-->

            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">机器型号：</label>
                    <div class="layui-input-block">
                        <select name="roleId" lay-verify="required" id="machineModelId">
                            <option value="">请选择设备号</option>
                        </select>
                    </div>
                </div>
            </form>



        <script>
            var form;
            layui.use(['form'], function () {

                form = layui.form;


                selectRoleName();    // 调用查询方法
                function selectRoleName() {
                    $.ajax({
                        url: "/api/getCEquipmentListByCompanyId",
                        type: "GET",
                        dataType: "json",
                        success: function (result) {
                            if(result.code == 0){
                                var list = result.data;    //返回的数据
                                var role = document.getElementById("machineModelId");        //add_role_name给select定义的id
                                for (var i = 0; i < list.length; i++) {
                                    var option = document.createElement("option");    // 创建添加option属性
                                    option.setAttribute("value", list[i].sbNo);                  // 给option的value添加值
                                    option.innerText = list[i].sbNo;             // 打印option对应的纯文本 （超级管理员、管理员）
                                    role.appendChild(option);                          // 给select 添加option子标签
                                    form.render("select");                                // 刷性select，显示出数据
                                }
                            }else if(result.code == 1){
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg(data.msg);
                                });
                            }else if(result.code == 2){
                                location.href='/WeChat/layuiAdmin-master/admin/index/login.html';
                            }
                        }
                    });
                }
            })
        </script>


        <button class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-normal btn" id="dj">查看数据</button>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6">
                <div class="navF">
                    <div class="nav_one">本台设备总检测数</div>
                    <div class="nav_two" id="ce1"></div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="navF">
                    <div class="nav_one">本台设备总付款数</div>
                    <div class="nav_two" id="ce2"></div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6">
                <div class="navF">
                    <div class="nav_one">本台设备今日检测数</div>
                    <div class="nav_two" id="ce3"></div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="navF">
                    <div class="nav_one">本台设备今日付款数</div>
                    <div class="nav_two" id="ce4"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="navTwo"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var mainContainer = document.getElementById('main');
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeMainContainer = function () {
        mainContainer.style.width = window.innerWidth + 'px';
        mainContainer.style.height = window.innerHeight * 0.8 + 'px';
    };
    //设置div容器高宽
    resizeMainContainer();
    // 初始化图表
    var myChart = echarts.init(mainContainer);
    $(window).on('resize', function () {//
        //屏幕大小自适应，重置容器高宽
        resizeMainContainer();
        myChart.resize();
    });

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        title: {
            text: '数据'
        },
        grid: {
            containLabel: true
        },
        legend: {
            data: ['今日未付款数', '今日付款数']
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {

            type: 'category',
            data: []
        },
        series: [{
            name: '今日付款数',
            type: 'bar',
            barWidth: 5,
            stack: '搜索引擎',
            data: []
        },
            {
                name: '今日未付款数',
                type: 'bar',
                stack: '搜索引擎',
                data: []
            }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        $(document).ready(function () {
            $('#dj').click(function () {
                var flg = yanzheng();
                if (flg) {
                    dianji();
                }
            })
        });

        function yanzheng() {
            if ($("#test1").val() == null || $("#test1").val() == "") {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.msg("选择月份不能为空!");
                })
                return false;
            } else if ($("#machineModelId").val() == null || $("#machineModelId").val() == "") {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.msg("设备编号不能为空!");
                })
                return false;
            }
            return true;
        }

        function dianji() {
            var today = $("#test1").val();
            var sbno = $("#machineModelId").val();

            $.ajax(
                {
                    url: '/api/getCompanyEcharts',
                    data: {mounthDate: today, sbno: sbno},
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 0) {
                            myChart.setOption({
                                yAxis: {data: data.date},
                                series: [
                                    {name: '今日付款数', data: data.listPay},
                                    {name: '今日未付款数', data: data.listPaid}
                                ]
                            });
                        }
                    },
                    error: function (error) {
                        //请求失败  获取的报错信息
                        console.log(error);
                    }
                }
            );

            //选择机器情况
            $.ajax(
                {
                    url: '/api/getChioceEqInfor',
                    data: {sbno: sbno},
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code === 0) {
                            $("#ce1").html(data.sqNumber);
                            $("#ce2").html(data.sqPayNumber);
                            $("#ce3").html(data.sqDayNumber);
                            $("#ce4").html(data.sqTPayNumber);
                        } else if (data.code == 2) {
                            layui.use('layer', function () {
                                var layer = layui.layer;
                                layer.msg(data.msg);
                            });
                        }
                    }
                    , error: function (error) {
                    //请求失败  获取的报错信息
                    console.log(error);
                }
                }
            );
        }

        //执行一个laydate实例
        laydate.render({
            elem: '#test1', //指定元素
            type: 'month',
            isInitValue: true,
        });
    });
</script>
</body>
</html>